<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport"
    content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
  <title></title>
  <link rel="stylesheet" href="./css/base.css" />
  <link rel="stylesheet" href="./css/style.css" />
  <script src="./js/flexible2.0.js"></script>
  <script src="./js/vue/vue-2.6.1.min.js"></script>
  <script src="./js/vue/axios.min.js"></script>
  <link rel="stylesheet" href="./js/nutui/nutui.css" />
  <script src="./js/nutui/nutui.js"></script>
</head>

<body>
  <div class="page-pkbang" id="app">
    <div class="flex flex-row items-end pk-header justify-center">
      <div class="item-1">
        <p>好友博饼结果：</p>
        <p>三红</p>
      </div>
      <div class="item-2"></div>
      <div class="item-3">
        <p>我的博饼结果：</p>
        <p>三红</p>
      </div>
    </div>
    <div class="header-notice flex flex-row items-center">
      <span class="pic-icon flex-shrink-0 mr-10"></span>
      <div class="flex-1 items-center color-d3a063 f24 truncate">
        PK结果：恭喜你获得11积分！喜你获得11积分！
      </div>
    </div>
    <div class="sec-ysz-container relative">
      <div class="ysz-wan relative">
        <div class="dice-box">
          <div v-if="isDicesLoading" class="loading"></div>
          <div v-for="(item,index) in dices" class="dice active" :class="'dice' + (index+1)">
            <img :src="'./images/dices'+item+'.png'" />
          </div>
        </div>
      </div>
    </div>
    <div @click="startDices" class="ljcy-btn"></div>
    <!-- 博饼英雄榜 -->
    <div class="relative pk-section-pt">
      <div class="pk-section-cap cap-pkgz"></div>
      <div class="pk-section-wrapper">
        <div class="pk-section-inner">
          <div class="pk-section-content pt-60 pb-30 px-40 f26 leading-normal">
            戏规则游戏规则游戏规则游戏规则游戏规则游戏规则游戏规则游戏规则游戏规则游戏规则游戏规则游戏规则游戏规则游戏规则游戏规则游戏规则游戏规则游戏规则游戏规则游戏规则游戏规则游戏规则游戏规则游戏规则游戏规则游戏规则游戏规则游戏规则游戏规则游戏规则游戏规则游戏规则游戏规则游戏规则游戏规则游戏规则游戏规则游戏规则
            <p>1111111111</p>
          </div>
        </div>
      </div>
    </div>

    <audio :src="voiceArr[0].src" preload ref="diceAudio0"></audio>
    <audio :src="voiceArr[1].src" preload ref="diceAudio1"></audio>

    <!-- 摇骰子结果提示框 -->
    <nut-popup v-model="isShowYszResult" position="center" class="popup-ysz-result">
      <div class="flex flex-row justify-end">
        <div class="close-pic" @click="isShowYszResult = false"></div>
      </div>
      <div class="soma-mid">
        <div class="soma-body text-center fw-bold">
          <!-- 没有次数的时候 -->
          <p class="fw-bold">没有博饼次数了哦~</p>
          <!-- 没有中奖的时候 -->
          <p class="mt-30">福利在靠近!</p>
          <p>再来一把运气加倍!</p>
          <!-- 中奖的时候 -->
          <!-- <p>哇塞！中状元了！</p>
            <p>获得200积分</p> -->
          <div class="wan">
            <div class="result-dice-box">
              <div v-for="(item,index) in dices" class="dice" :class="'dice' + (index+1)">
                <img :src="'./images/dices_s'+item+'.png'" />
              </div>
            </div>
          </div>
        </div>
        <div class="pic-1"></div>
      </div>
      <div class="flex flex-row justify-center mt-30">
        <a class="handle-btn">再来一把</a>
        <a class="handle-btn">分享助力</a>
      </div>
    </nut-popup>
  </div>
  </div>
  <script>
    let vm = new Vue({
      el: "#app",
      data: {
        isDicesLoading: false, //摇骰子请求中
        dices: [4, 4, 4, 4, 1, 1], //[4,4,4,4,1,1]
        voiceArr: [
          {
            src: "./images/voice/audio_mny.mp3",
            title: "闽南语",
          },
          {
            src: "./images/voice/audio_pth.mp3",
            title: "普通话",
          },
        ],
        voiceIndex: 1,
        isShowYszResult: true
      },
      mounted() {
        this._voiceInstance = this._initVoice();
      },
      methods: {
        //开始摇骰子
        startDices() {
          this.isDicesLoading = true;
          this.dices = [];
          //请求接口以后
          setTimeout(() => {
            this.isDicesLoading = false;
            this.dices = [4, 4, 4, 4, 1, 1];
            this._voiceInstance.play(0);
          }, 1500);
        },
        //初始化音频
        _initVoice() {
          let spriteData = {};
          if (this.voiceIndex == 1) {
            spriteData = {
              tt: { //摇的声音
                start: 36.5,
                length: 1
              },
              0: { //没中
                start: 0,
                length: 2.5
              },
              1: {//一秀
                start: 2.5,
                length: 2.8
              },
              2: { //二举
                start: 5.3,
                length: 2.7
              },
              3: { //四进
                start: 8.0,
                length: 2.5

              },
              4: { //三红
                start: 10.5,
                length: 3
              },

              5: { //对堂
                start: 13.5,
                length: 2.5
              },
              6: { //状元
                start: 16,
                length: 3.5
              }
            };
          } else {
            //闽南语
            spriteData = {
              tt: { //摇的声音
                start: 0,
                length: 1
              },
              0: { //没中
                start: 2.0,
                length: 2.8
              },
              1: {//一秀
                start: 5.2,
                length: 2.4
              },
              2: { //二举
                start: 8.0,
                length: 2.7
              },
              3: { //四进
                start: 11.0,
                length: 3.5
              },
              4: { //三红
                start: 14.6,
                length: 3.4
              },

              5: { //对堂
                start: 18.0,
                length: 2.8
              },
              6: { //状元
                start: 22.8,
                length: 3.2
              }
            };
          }

          let index = 0;

          let handler = function () {
            if (
              this.currentTime >=
              spriteData[index].start + spriteData[index].length
            ) {
              this.pause();
            }
          };
          let audioElem = this.$refs.diceAudio;
          audioElem.addEventListener("timeupdate", handler, false);

          var play = function (rank) {
            audioElem.currentTime = spriteData[rank].start;
            index = rank;
            audioElem.play(rank);
          };

          var pause = function () {
            audioElem.pause();
          };

          return {
            play: play,
            pause: pause,
          };
        },
      },
    });
  </script>
</body>

</html>